<template>
  <div>
    <el-form ref="form"
             :model="form"
             label-width="80px"
             class="frame">

      <el-form-item label-width="1px">
        <i class="el-icon-warning-outline"></i>
        通过手机号关联您的账户登录，如果该手机号已不再使用，请尽快修改
      </el-form-item>
      <el-form-item label="登录手机">
        <el-input placeholder="请输入内容"
                  v-model="form.userPhone"
                  clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   @click="submitForm()">更换号码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
export default {
  data () {
    return {
      radio: '1',
      form: "",
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',


    };
  },
  methods: {
    handleEdit () {
      console.log(this.userId);
      this.$axios.get("users/" + this.userId).then((resp) => {
        this.form = resp.data.data.user;
        // this.dialog.updateshow = true;
      });
    },
    //修改个人信息--wu
    submitForm () {
      this.$axios.put("users", this.form).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.messages);


        } else {
          this.$message.error(res.data.messages);
        }
      });
    },



  },
  created () {
    this.userId = JSON.parse(sessionStorage.getItem("userId"));
    console.log(this.userId);
    this.handleEdit();
  }
};

  </script>
  <style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/* 
  .el-input {
        width: 170px;
      }
      .el-select{
        width: 170px;
      } */
.frame {
  width: 470px;
}
</style>